import React, { useEffect, useState } from 'react';

const btnStyle: React.CSSProperties = {
  position: 'fixed',
  right: 32,
  bottom: 120,
  zIndex: 9999,
  width: 48,
  height: 48,
  borderRadius: '50%',
  background: '#fff',
  boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: 28,
  color: '#2260ff',
  cursor: 'pointer',
  transition: 'opacity 0.2s',
};

export default function BackToTop() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 200);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  if (!show) return null;
  return (
    <div style={btnStyle} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} title="返回顶部">
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14 22V6" stroke="#2260ff" strokeWidth="3" strokeLinecap="round"/>
        <path d="M8 12L14 6L20 12" stroke="#2260ff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
} 